import PropTypes from '@/utils/PropTypes'
import { Modal } from 'ant-design-vue'
import { defineComponent, nextTick, onMounted } from 'vue'
export default defineComponent({
  name: 'componentName',
  props: {
    width: PropTypes.anyOption<string | number>().def(600),
    title: PropTypes.string().def(''),
    visible: PropTypes.bool().def(false),
    formRef: PropTypes.any().def(null),
    footer: PropTypes.any().def(true),
    closable: PropTypes.bool().def(true),
    maskClosable: PropTypes.bool().def(true),
    bodyStyle: PropTypes.object().def({}),
    okText: PropTypes.string().def('确定'),
    cancelText: PropTypes.string().def('取消'),
    position: PropTypes.object(),
  },
  emits: ['update:visible', 'update:handelOk', 'update:handelCancel'],
  setup(props, { emit, slots }) {
    const handleOk = () => {
      emit('update:handelOk')
    }
    const handleCancel = () => {
      emit('update:visible', false)
      emit('update:handelCancel')
    }
    return () => (
      <div>
        {props.footer ? (
          <Modal
            destroyOnClose={true}
            v-model:visible={props.visible}
            title={props.title}
            width={props.width}
            maskClosable={props.maskClosable}
            closable={props.closable}
            bodyStyle={props.bodyStyle}
            okText={props.okText}
            cancelText={props.cancelText}
            style={props.position && { ...props.position }}
            onOk={handleOk}
            onCancel={handleCancel}
          >
            {slots.form?.()}
          </Modal>
        ) : (
          <Modal
            destroyOnClose={true}
            v-model:visible={props.visible}
            title={props.title}
            width={props.width}
            maskClosable={props.maskClosable}
            closable={props.closable}
            footer={props.footer}
            bodyStyle={props.bodyStyle}
            style={props.position && { ...props.position }}
            onOk={handleOk}
            onCancel={handleCancel}
          >
            {slots.form?.()}
            {slots.footer?.()}
          </Modal>
        )}
      </div>
    )
  },
})
